@import 'styles/settings';
@import 'styles/tooltip';
@import 'styles/legend-button';

.opacityButton {
  @extend .legendButton;
  height: 28px;
  padding-bottom: 6px;
}

.opacityEnabled {
  svg {
    fill: $brand-color-main;
    stroke: $brand-color-main;
  }
}

.opacityButtonActive {
  background-color: $blue;
  border-radius: 0 0 2px 2px;
}

:global {
  .opacityChangeTooltip {
    .rc-tooltip-content {
      .rc-tooltip-arrow {
        background: $blue;
        border: 0;
        height: 10px;
        right: 0;
        width: 26px;
      }

      .rc-tooltip-inner {
        background: $blue;
        border: 0;
        border-radius: 4px 4px 0 0;
        color: $grey-text;
        max-width: unset;
        padding: 3px 9px;
        width: 218px;
      }
    }
  }
}